<template>
  <div class="sjplatformSelectForm">
    <el-form :inline="true">
      <el-form-item label="机构名称：">
        <el-input v-model="orgName" placeholder="请输入机构名称..." />
      </el-form-item>
      <el-form-item label="机构类型：">
        <el-select v-model="orgType" clearable placeholder="请选择...">
          <el-option label="公司" value="1" />
          <el-option label="部门" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="openEditForm('add')">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="sjplatformtable">
    <el-table :data="tableData" v-loading="loading" stripe border style="width: 100%">
      <el-table-column type="expand">
        <template #default="{ row }">
          <el-form label-width="100px" :model="row" disabled>
            <el-form-item label="机构Id：">
              <span>{{ row.id }}</span>
            </el-form-item>
            <el-form-item label="机构名称：">
              <span>{{ row.orgName }}</span>
            </el-form-item>
            <el-form-item label="上级：">
              <span>{{ row.pName }}</span>
            </el-form-item>
            <el-form-item label="添加时间：">
              <span>{{ row.addTime }}</span>
            </el-form-item>
            <el-form-item label="描述：">
              <span>{{ row.mark }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ $index + 1 + (currentPage - 1) * pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="orgName" label="名称" width="280" class-name="left-align">
        <template #default="{ row }">
          <el-tooltip class="item" effect="light" :content="row.orgName" placement="top">
            <span>{{ row.orgName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="pName" label="上级" width="280" class-name="left-align">
        <template #default="{ row }">
          <el-tooltip class="item" effect="light" :content="row.pName" placement="top">
            <span>{{ row.pName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="orgTypeCn" label="类型" width="80" />
      <el-table-column prop="mark" label="描述" class-name="left-align">
        <template #default="{ row }">
          <el-tooltip class="item" effect="light" :content="row.mark" placement="top">
            <span>{{ row.mark }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template #default="row">
          <el-tooltip content="修改" placement="bottom" effect="light">
            <i class="edit-icon" @click="openEditForm('edit', row)"></i>
          </el-tooltip>
          <el-tooltip content="删除" placement="bottom" effect="light">
            <i class="del-icon" @click="handleDelete(row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage"
      @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="newOrgTableVisible" :title="formTitle" width="50%" draggable>
    <OrgAddOrUpdate />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="operateOrg">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import OrgAddOrUpdate from "./OrgAddOrUpdate.vue";
import { useOrgTable } from "@/hooks/SystemManager/Org/useOrgTable";
import { useOrgStore } from "../../../store/useOrgStore";
import commonUtil from "../../../utils/common";
import emitter from "../../../utils/emitter";

const orgStore = useOrgStore();
const currentPage = ref(1);
const pageSize = ref(10); // 默认每页大小
const formTitle = ref("新增机构");
const loading = ref(false);

const newOrgTableVisible = ref(false); //新增机构窗口
const addOrUpdate = ref("add"); //新增还是修改

// 使用数据处理 Hook
const {
  orgId,
  orgName,
  orgType,
  total,
  tableData,
  fetchData,
  addData,
  updateData,
  deleteData,
} = useOrgTable(currentPage, pageSize);
fetchData();

watch(
  () => orgStore.selectedOrgNode?.id,
  (newId) => {
    orgId.value = newId;
    fetchData();
  }
);
//翻页事件
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchData(); // 根据当前页获取数据
};
//打开编辑窗口
const openEditForm = (value, data) => {
  addOrUpdate.value = value;
  if (value == "add") {
    formTitle.value = "新增机构";
    orgStore.resetOrgModel();
  }
  if (value == "edit") {
    formTitle.value = "修改机构";
    orgStore.orgModel = data.row;
  }
  newOrgTableVisible.value = true;
};
//新增或修改
const operateOrg = async () => {
  if (addOrUpdate.value == "add") {
    if (await addData(orgStore.orgModel)) {
      commonUtil.Methods.ShowMessage("success", "新增机构成功！");
      newOrgTableVisible.value = !newOrgTableVisible.value;
    } else {
      commonUtil.Methods.ShowMessage("Oops", "新增机构失败！");
    }
  }
  if (addOrUpdate.value == "edit") {
    if (await updateData(orgStore.orgModel)) {
      commonUtil.Methods.ShowMessage("success", "修改机构成功！");
      newOrgTableVisible.value = !newOrgTableVisible.value;
    } else {
      commonUtil.Methods.ShowMessage("Oops", "修改机构失败！");
    }
  }
  queryData();
  emitter.emit('refresh-org-tree');
};
//删除
const handleDelete = async (data) => {
  if (await deleteData(data.row.id)) {
    commonUtil.Methods.ShowMessage("success", "删除机构成功！");
  } else {
    commonUtil.Methods.ShowMessage("Oops", "删除机构失败！");
  }
  queryData();
  emitter.emit('refresh-org-tree');
};
//重置按钮
const reset = () => {
  orgStore.resetOrgModel();
};
const cancel = () => {
  newOrgTableVisible.value = !newOrgTableVisible.value;
};
//查询按钮
const queryData = () => {
  loading.value = true;
  currentPage.value = 1;
  fetchData();
  loading.value = false;
};
</script>
